<template>
  <div class="manager">
    <a-card>
      <div class="channel">
        <div class="label">平台类型：</div>
        <ul>
          <li v-for="(item, index) in channels" :key="index" :class="{ active: selectedChannelIndex == index }" @click="channelSelect(index)">
            <img :src="item.icon" />
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </a-card>
    <a-card style="margin-top: 10px; height: 600px" class="content">
      <div class="main-box">
        <div class="account-list">
          <div class="label">平台账号</div>
          <div class="accounts">
            <ul>
              <li v-for="(item, index) in channelAccounts" :key="item.uid" :class="{ active: index == 0 }">
                <img :src="item.face" />
                <span>{{ item.name }}</span>
              </li>
            </ul>
          </div>
          <div class="account-btns">
            <a-button type="primary" icon="plus" @click="addAccount">添加账号</a-button>
          </div>
        </div>
        <div class="data-dashboard-mid">
          <div class="total-state">
            <div class="state-group fans">
              <div class="state-icon">
                <img src="@/assets/media_fans.png" />
              </div>
              <div class="state-num">42,167</div>
              <div class="state-title">粉丝总数</div>
            </div>
            <div class="state-group add">
              <div class="state-icon">
                <img src="@/assets/media_add.png" />
              </div>
              <div class="state-num">1,337</div>
              <div class="state-title">昨日新增</div>
            </div>
            <div class="state-group article">
              <div class="state-icon">
                <img src="@/assets/media_article.png" />
              </div>
              <div class="state-num">544</div>
              <div class="state-title">发文数量</div>
            </div>
          </div>
          <div class="article-list">
            <div class="articles">
              <div class="list-header">
                <span>标题</span>
                <span>发布时间</span>
                <span>操作</span>
              </div>
              <ul>
                <li v-for="(item, index) in articles" :key="index">
                  <a href>{{ item.title }}</a>
                  <span>{{ item.time }}</span>
                  <a href>预览</a>
                </li>
              </ul>
            </div>
            <div class="pager">
              <a-pagination size="small" :total="50" />
            </div>
          </div>
        </div>
        <div class="data-dashboard-right">
          <div class="data-states">
            <div class="state-group share">
              <div class="state-icon">
                <img src="@/assets/media_share.png" />
              </div>
              <div class="state-num">
                <dl>
                  <dt>765</dt>
                  <dd>转发人数</dd>
                </dl>
              </div>
              <div class="state-count">
                <dl>
                  <dt>342</dt>
                  <dd>转发人次</dd>
                </dl>
              </div>
            </div>
            <div class="state-group collect">
              <div class="state-icon">
                <img src="@/assets/media_collect.png" />
              </div>
              <div class="state-num">
                <dl>
                  <dt>718</dt>
                  <dd>收藏人数</dd>
                </dl>
              </div>
              <div class="state-count">
                <dl>
                  <dt>765</dt>
                  <dd>收藏人次</dd>
                </dl>
              </div>
            </div>
            <div class="state-group read">
              <div class="state-icon">
                <img src="@/assets/media_read.png" />
              </div>
              <div class="state-num">
                <dl>
                  <dt>345</dt>
                  <dd>阅读人数</dd>
                </dl>
              </div>
              <div class="state-count">
                <dl>
                  <dt>654</dt>
                  <dd>阅读人次</dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="data-canvas">
            <div ref="charts" style="width: 100%;height: 260px;"></div>
          </div>
        </div>
      </div>
    </a-card>
    <AddModal ref="addModal" @refresh="refreshAccounts"></AddModal>
  </div>
</template>
<script>
import weixinIcon from '@/assets/movie_channels/c_weixin.png'
import weiboIcon from '@/assets/movie_channels/c_weibo.png'
import toutiaoIcon from '@/assets/movie_channels/c_toutiao.png'
import douyinIcon from '@/assets/movie_channels/c_douyin.png'
import xiguaIcon from '@/assets/movie_channels/c_xigua.png'
import * as echarts from 'echarts'
import chartOption from '@/config/mediaChartsOption'
import AddModal from './modules/AddModal'
import { getAction } from '@/api/manage'

export default {
  name: 'Manager',
  components: { AddModal },
  data() {
    return {
      channels: [
        { icon: weixinIcon, name: '微信' },
        { icon: weiboIcon, name: '微博' },
        { icon: toutiaoIcon, name: '头条' },
        { icon: douyinIcon, name: '抖音' },
        { icon: xiguaIcon, name: '西瓜' }
      ],
      selectedChannelIndex: 0,
      channelAccounts: [
        { face: weixinIcon, name: '平台账号1', uid: 1 },
        { face: weixinIcon, name: '平台账号1', uid: 2 },
        { face: weixinIcon, name: '平台账号1', uid: 3 }
      ],
      articles: [
        { title: '双十一当天全国处理快件6.96亿件，再创历史新高', time: '2021-09-12 14:32:11' },
        { title: '双十一当天全国处理快件6.96亿件，再创历史新高', time: '2021-09-12 14:32:11' },
        { title: '双十一当天全国处理快件6.96亿件，再创历史新高', time: '2021-09-12 14:32:11' },
        { title: '双十一当天全国处理快件6.96亿件，再创历史新高', time: '2021-09-12 14:32:11' },
        { title: '双十一当天全国处理快件6.96亿件，再创历史新高', time: '2021-09-12 14:32:11' },
        { title: '双十一当天全国处理快件6.96亿件，再创历史新高', time: '2021-09-12 14:32:11' },
        { title: '双十一当天全国处理快件6.96亿件，再创历史新高', time: '2021-09-12 14:32:11' }
      ],
      charts: null
    }
  },
  created() {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  mounted() {
    this.loadAccounts()
  },
  methods: {
    channelSelect(index) {
      this.selectedChannelIndex = index
    },
    initCharts() {
      this.charts = echarts.init(this.$refs.charts)
      this.charts.setOption(chartOption)
    },
    addAccount() {
      this.$refs.addModal.show()
    },
    refreshAccounts() {},
    loadAccounts() {
      this.loading = true
      getAction('third/thirdAccount/getAllInfo', {})
        .then(res => {
          if (res.success) {
            // this.dataSource = res.result
            console.log(res.result)
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
ul {
  padding: 0;
  margin: 0;
  li {
    list-style: none;
  }
}
.manager {
  .content {
    /deep/ .ant-card-body {
      padding: 0;
    }
  }
  .channel {
    display: flex;
    justify-content: center;
    .label {
      line-height: 30px;
    }
    ul {
      display: flex;
      li {
        height: 30px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 30px;
        img {
          width: 22px;
          height: 22px;
        }
        span {
          font-size: 14px;
          line-height: 30px;
          margin-left: 10px;
        }
      }
      li.active {
        background-color: #003366;
        border-radius: 4px;
        span {
          color: white;
        }
      }
      li:hover {
        cursor: pointer;
      }
    }
  }
  .main-box {
    display: flex;
    height: 600px;
    .account-list {
      width: 210px;
      border-right: 1px #edf0f3 solid;
      display: flex;
      flex-flow: column;
      padding: 0 24px;
      .label {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        line-height: 55px;
        height: 55px;
      }
      .accounts {
        flex: 1;
        ul {
          li {
            width: 160px;
            height: 38px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            &.active {
              background: #0083f8;
              color: white;
            }
            img {
              width: 28px;
              height: 28px;
              border-radius: 14px;
              margin-right: 10px;
            }
          }
        }
      }
      .account-btns {
        height: 67px;
        width: 160px;
        display: flex;
        justify-content: center;
        align-content: center;
        button {
          width: 100%;
          background: #dff0ff;
          color: #0083f8;
          border: 0;
          text-shadow: none;
          box-shadow: none;
        }
      }
    }
    .data-dashboard-mid {
      flex: 1;
      padding: 0 24px;
      display: flex;
      flex-flow: column;
      .total-state {
        display: flex;
        justify-content: space-around;
        margin-top: 40px;
        .state-group {
          display: flex;
          flex-flow: column;
          justify-content: center;
          text-align: center;
          .state-icon {
            img {
              width: 52px;
              height: 52px;
            }
          }
          .state-num {
            font-size: 36px;
            font-family: Impact;
            font-weight: 400;
            color: #333333;
            line-height: 55px;
          }
          .state-title {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 35px;
          }
        }
      }
      .article-list {
        .articles {
          background: #f0f8ff;
          border-radius: 4px;
          padding: 25px;
          margin-top: 30px;
          font-size: 13px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          line-height: 32px;
          .list-header {
            display: flex;
            span {
              &:nth-child(1) {
                flex: 1;
              }
              &:nth-child(2) {
                width: 140px;
                text-align: center;
              }
              &:nth-child(3) {
                width: 80px;
                text-align: center;
              }
            }
          }
          ul {
            li {
              display: flex;
              span {
                width: 140px;
                text-align: center;
              }
              a {
                &:first-child {
                  flex: 1;
                  color: #333;
                }
                &:last-child {
                  width: 80px;
                  text-align: center;
                }
              }
            }
          }
        }
        .pager {
          margin-top: 10px;
          text-align: right;
        }
      }
    }
    .data-dashboard-right {
      width: 323px;
      border-left: 1px #edf0f3 solid;
      padding: 0 24px;
      .data-states {
        margin-top: 36px;
        .state-group {
          width: 280px;
          height: 76px;
          border-radius: 4px;
          display: flex;
          text-align: center;
          padding: 11px 18px;
          margin-bottom: 10px;
          .state-icon {
            img {
              width: 55px;
              height: 55px;
            }
          }
          .state-num {
            flex: 1;
          }
          .state-count {
            flex: 1;
          }
          dt {
            font-size: 24px;
            font-family: Impact;
            font-weight: 400;
            line-height: 40px;
          }
          dd {
            font-size: 12px;
            font-weight: 400;
            color: #666666;
          }
          &.share {
            background: #f0f8ff;
            dt {
              color: #0099ff;
            }
          }
          &.collect {
            background: #fff8fc;
            dt {
              color: #cc66cc;
            }
          }
          &.read {
            background: #effffa;
            dt {
              color: #71d08c;
            }
          }
        }
      }
    }
  }
}
</style>

